<!-- 支付成功界面 -->
<template>
	<view class="item-block">
		<view class="center_top">
			<view class="one_top_logo" :style="{paddingTop:navBarTop + navBarHeight  + 'px'}">
				<view class="iconfont icon-duihao2 ">

				</view>
				<view class="succ-title">
					支付成功
				</view>
			</view>
			<view class="money_item">
				<span>￥</span> {{moneyvalue}}
			</view>
			<view class="bot">
				<view class="item">
					<view class="item_title">
						创建队伍
					</view>
					<view class="item_title">
						￥{{moneyvalue}}
					</view>
				</view>
				<view class="item">
					<view class="item_title">
						交易方式
					</view>
					<view class="item_title">
						微信
					</view>
				</view>
			</view>
		</view>
		<view class="form-but">
			<u-button type="primary" text="完成" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarTop: 0,
				navBarHeight: 0,
				id: '',
				moneyvalue: ''
			}
		},
		created() {

		},
		onLoad(options) {
			// 从路由参数中获取传递的值
			this.id = decodeURIComponent(options.id)
			this.moneydetail()
		},
		mounted() {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.navBarTop = menuButtonInfo.top;
			this.navBarHeight = menuButtonInfo.height;


		},
		methods: {
			// 总支付金额
			moneydetail() {
				const that = this
				this.$request(`/race/getEntryFree/${this.id}/1`, 'get')
					.then(
						res => {
							that.moneyvalue = res.data.data
						})
			},
			// 点击确定后回退两个页面
			submit(){
				uni.navigateBack({
					delta:2
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.item-block {
		height: calc(100vh - 80px);
		background-color: #fff;
		position: relative;
		padding-bottom: 80px;

		.form-but {
			width: 100%;
			position: absolute;
			bottom: 30px;
			display: flex;
			justify-content: center;

			::v-deep .u-button {
				width: calc(100vw - 40px);
				border-radius: 25px;
				border: 0px;
				background-color: #de3600;
				height: 47px;
			}
		}

		.steps_item {
			padding: 20px;

			::v-deep .u-steps-item__wrapper__dot,
			::v-deep .u-steps-item__line {
				background-color: #de3600 !important;
			}

			::v-deep .u-text__value--content,
			::v-deep .u-text__value--main {
				color: #de3600 !important;
			}
		}

		.center_top {
			background-color: #de3600;
			padding: 20px 20px 40px;
			height: 320px;
			border-top-left-radius: 0;
			/* 不设置左上角圆角 */
			border-top-right-radius: 0;
			/* 不设置右上角圆角 */
			border-bottom-left-radius: 40% 12%;
			/* 设置左下角椭圆弧度 */
			border-bottom-right-radius: 40% 12%;
			/* 设置右下角椭圆弧度 */
			display: flex;
			flex-direction: column;
			align-items: center;

			.one_top_logo {
				display: flex;
				flex-direction: column;
				align-items: center;

				.icon-duihao2 {
					color: #fff;
					font-size: 50px;
				}

				.succ-title {
					font-size: 14px;
					color: #fff;
				}

			}

			.money_item {
				margin: 20px 0;
				font-size: 40px;
				font-weight: 600;
				color: #fff;

				span {
					font-weight: 400;
					font-size: 28px;
				}
			}

			.bot {
				width: 100%;

				.item {
					margin-bottom: 8px;
					display: flex;
					justify-content: space-between;

					.item_title {
						font-size: 14px;
						color: #fff;
					}

				}
			}

		}

	}
</style>